<template>
  <div>
    <h1>房型编辑页</h1>
    <a href="/">返回房型列表</a>
    <table class="table">
      <tbody>
        <tr>
          <td>编号</td>
          <td>{{ data.id }}</td>
        </tr>
        <tr>
          <td>房型名称</td>
          <td><input type="text" v-model="data.houseName" /></td>
        </tr>
        <tr>
          <td>门市价格</td>
          <td><input type="text" v-model="data.price" /></td>
        </tr>
        <tr>
          <td>房间数</td>
          <td>
            {{ data.sum }}
          </td>
        </tr>
        <tr>
          <td>状态</td>
          <td>
            <input
              type="radio"
              value="1"
              name="state"
              v-model="data.state"
            />启用
            <input
              type="radio"
              value="2"
              name="state"
              v-model="data.state"
            />停用
          </td>
        </tr>
        <tr>
          <td>房间号</td>
          <td>
            <span v-for="e in datainfo">
              <input type="checkbox" :value="e" @click="datadx(e)" />
            </span>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="button" value="修改" @click="update" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

const datainfo = ref([
  "1001",
  "1002",
  "1003",
  "1004",
  "1005",
  "1006",
  "1007",
  "1008",
]);
const datadx = ref();

const data = ref({
  id: 0,
  houseName: "string",
  price: "string",
  sum: 0,
  state: 0,
  houseinfoid: "string",
  isDelete: true,
});

onMounted(() => {
  getid();
});
const getid = () => {
  var vid = route.query.id;
  axios
    .get("https://localhost:7035/api/House/Getid", { params: { id: vid } })
    .then((res) => {
      data.value = res.data;
    });
};

const update = () => {
  data.value.houseinfoid = datainfo.value.toString();
  if (data.value.houseName == "") {
    alert("房间名称不能为空");
    return;
  }
  if (data.value.price == "0" || data.value.price == "1000") {
    alert("价格不能为0元且不能超过100元");
    return;
  }

  axios
    .put("https://localhost:7035/api/House/UpdateHouse", data.value)
    .then((res) => {
      if (res.data > 0) {
        alert("修改成功");
        router.push({ path: "/" });
        return;
      } else {
        alert("修改失败");
        return;
      }
    });
};
</script>
<style scoped></style>
